<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="./node_modules/three/build/three.module.js"></script>
    <script src="./node_modules/three/examples/jsm/controls/OrbitControls.js"></script> -->
    <!-- <script src="../libs/three.js"></script>
    <script src="../libs/OrbitControls.js"></script> -->
    <style>
      .box {
        width: 500px;
        height: 500px;
      }
      body {
        width: 100%;
        height: 100%;
      }
      /* body {
        margin: 0;
      } */
    </style>
  </head>
  <body>
    <!-- <script type="module">
      import * as THREE from "https://unpkg.com/three/build/three.module.js";

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      function animate() {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      }

      animate();
    </script> -->
    <script type="module">
      import * as THREE from "https://unpkg.com/three/build/three.module.js";
      import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls.js";
      // 创建一个场景
      var scene = new THREE.Scene();
      // 创建一个具有透视效果的摄像机
      var camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      // 创建一个渲染器
      var renderer = new THREE.WebGLRenderer();
      // 设置渲染器的大小
      renderer.setSize(window.innerWidth, window.innerHeight);
      // 将渲染器添加到DOM中
      document.body.appendChild(renderer.domElement);
      // 创建控制器
      // let controls = new OrbitControls(camera, renderer.domElement);
      let controls = new THREE.OrbitControls(camera, renderer.domElement);

      // 设置最小和最大距离
      controls.minDistance = -3;
      controls.maxDistance = 5;

      // 创建一个球体几何体
      var geometry = new THREE.SphereGeometry(5, 32, 32);

      // 加载纹理图片
      var textureLoader = new THREE.TextureLoader();
      textureLoader.setCrossOrigin("anonymous");
      textureLoader.load(
        "https://wz-tupian.oss-cn-beijing.aliyuncs.com/1111.jpg",
        function (texture) {
          // 在这里使用纹理
          var material = new THREE.MeshBasicMaterial({
            map: texture,
            side: THREE.DoubleSide,
          });
          var sphere = new THREE.Mesh(geometry, material);
          // 将球体添加到场景中
          scene.add(sphere);
          // 将相机的位置设置在球体的内部
          camera.position.set(1, 0, 0);
        },
        undefined,
        function (error) {
          console.error("加载失败", error);
        }
      );

      // 创建一个渲染循环
      function animate() {
        controls.update();
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>
